<template>
	<view class="productlist">
		<SearchBar :keyword="seachKeyWord" @search="onSearch" placeholder="搜索产品" />
		<view class="productlist__items">
			<!-- :prodNumber="proditem.Name"
			    :prodName="proditem.ProductNumber" 
			    :prodPrice="proditem.Price" 
			     :shortLabel="proditem.ShortLabel" -->
			<block v-for="(listItem, index) in productList" :key="index">
				<ProductItem v-for="(proditem, oindex) in listItem" :key="proditem.ProductId" :imageSrc="proditem.base64Img"
				 :prodItem="proditem" @navigationPart="toPartPage" @prodItemClick="selectProdItem" />
			</block>
		</view>
		<view class="productlist__loadmore" @click="loadPageMore" v-if="displayLoadMore">
			<text>加载更多</text>
		</view>
	</view>
</template>
<script>
	import SearchBar from '../../components/SearchBar';
	import ProductItem from '../../components/ProductItem';

	export default {
		components: {
			SearchBar,
			ProductItem
		},
		data() {
			return {
				pageNum: 1,
				productList: [],
				seachKeyWord: "",
				action: "",
				prodIndex: 0,
				displayLoadMore: false,
				type:false,
			}
		},
		onLoad(e) {
			console.log(e);
			if (e.hasOwnProperty("action") &&
				e.action === "selectproduct") {
				this.prodIndex = e.prodIndex;
				this.action = e.action;
				this.pageNum = 1;
				this.type=e.type;
			} else {
				uni.showLoading({
					title: "加载中..."
				})
				this.GetProductList();
			}

		},
		methods: {
			selectProdItem(e) {

				if (this.action === "selectproduct") {
					//console.log(e.prodItem);
					let eventParams = {
						prodItem: e.prodItem,
						prodIndex: this.prodIndex,
						proImage:e.imageSrc,
						type:this.type
					}
					uni.$emit("selectProdItem", eventParams)
					uni.navigateBack()
				} 
			},

			toPartPage(e) {
				console.log(e);
				uni.navigateTo({
					url: `../fittingsearch/index?prodNum=${e.prodNum}`,
				})
			},

			async GetProdImages(imageIds) {
				if (imageIds.length > 0) {
					let uPhone = this.UserInfo.mobile;
					let token = this.UserInfo.RetId;
					let result = await this.commService.ImageReaderAsync(uPhone, imageIds, 1, token);
					if (result.RetBool && result.RetObject) {
						return JSON.parse(result.RetObject)
					}
					return null;
				}
				return
			},

			async setProdPageImg(productPage) {
				let imageArray = new Array();
				for (let index in productPage) {
					if (productPage[index].ImageId)
						imageArray.push(productPage[index].ImageId)
				}
				let imageids = imageArray.join(",");
				let imgresult = await this.GetProdImages(imageids);

				for (let imgindex in imgresult) {
					let prodIndex = productPage.findIndex(prodItem => {
						return imgresult[imgindex].ImgId === prodItem.ImageId
					});
					if (prodIndex > -1)
						productPage[prodIndex].base64Img = `data:image/jpeg;base64,${imgresult[imgindex].ImgBaseStr}`;
				}
				this.productList.push(productPage);
				console.log(productPage)
			},

			async GetProductList() {
				let uPhone = this.UserInfo.mobile;
				let token = this.UserInfo.RetId;
				//分页页码接口从0开始
				let pageIndex = this.pageNum -1
				
				let result = await this.productlistservice.productListAsync(uPhone, this.seachKeyWord,
					pageIndex, this.PageSize, token);
				console.log(result);
				if (result.RetBool && result.RetObject) {
					let productPage = JSON.parse(result.RetObject);
					if (productPage && productPage.length > 0) {
						this.setProdPageImg(productPage);
						this.displayLoadMore = true;
					} else
						this.displayLoadMore = false;
				} else {
					this.displayLoadMore = false;
				}
				uni.hideLoading();
			},

			loadPageMore(e) {

				uni.showLoading({
					title: "加载中..."
				})
				this.pageNum += 1;
				this.GetProductList();

			},

			onSearch(keyword) {
				uni.showLoading({
					title: "加载中..."
				})
				//debugger;
				console.log(keyword)
				this.seachKeyWord = keyword;
				this.pageNum = 1;
				this.productList = [];
				this.GetProductList();
			}
		}
	}
</script>
<style lang="scss">
	@import './index.scss';
</style>
